﻿@model Logistics.Web.Models.Order.LocationAddressModel

@using Telerik.Web.Mvc
@using Telerik.Web.Mvc.UI
@using Nop.Core.Domain.Common

@using (Html.BeginForm("DeliveryAddress", "Order", FormMethod.Post))
{
    <div class="address-select-wrapper">
        <div class="address-form">
            <h2>Delivery Location</h2>
            <p>Where are you shipping to?</p>
            @if (Model.Addresses.Count > 0)
            {
                <button type="button" class="address-select btn btn-normal">Select from Saved Addresses</button>
            }
            <div class="row">
                <div class="section-wrapper">
                    @*@Html.RequiredHint()<span>= Mandatory fields</span>*@
                    @Html.HiddenFor(model => model.Address.Id)
                    <div class="col-sm-4">
                        @Html.RequiredHint()
                        @Html.LabelFor(model => model.Address.FirstName)
                        @Html.TextBoxFor(model => model.Address.FirstName, new { @class = "form-control" })
                    </div>

                    <div class="col-sm-4">
                        @Html.RequiredHint()
                        @Html.LabelFor(model => model.Address.LastName)
                        @Html.TextBoxFor(model => model.Address.LastName, new { @class = "form-control" })
                    </div>

                    <div class="my-location-company col-sm-4">
                        @Html.LabelFor(model => model.Address.Company)
                        @Html.TextBoxFor(model => model.Address.Company, new { @class = "form-control", @placeholder = "Optional" })
                    </div>

                    <div class="col-sm-6">
                        @Html.RequiredHint()
                        @Html.LabelFor(model => model.Address.Address1)
                        @Html.TextBoxFor(model => model.Address.Address1, new { @class = "form-control" })
                    </div>
                    <div class="col-sm-2">
                        @Html.LabelFor(model => model.Address.Address2)
                        @Html.TextBoxFor(model => model.Address.Address2, new { @class = "form-control", @placeholder = "Optional" })
                    </div>

                    <div class="col-sm-4">
                        @Html.RequiredHint()
                        @Html.LabelFor(model => model.Address.City)
                        @Html.TextBoxFor(model => model.Address.City, new { @class = "form-control" })
                    </div>
                    <div class="col-xs-6 col-sm-4">
                        @Html.RequiredHint()
                        @Html.LabelFor(model => model.Address.StateProvinceId)
                        @Html.DropDownListFor(model => model.Address.StateProvinceId, Model.AvailableStateProvinces, new { @class = "form-control province-form" })
                    </div>
                    <div class="col-xs-6 col-sm-4">
                        @Html.LabelFor(model => model.Address.CountryName)
                        <div class="location-display">
                            @Html.DropDownListFor(model => model.Address.CountryId, Model.AvailableCountries, new { @class = "form-control country-form" })
                        </div>
                    </div>
                    <div class="col-sm-4">
                        @Html.RequiredHint()
                        @Html.LabelFor(model => model.Address.ZipPostalCode)
                        @Html.TextBoxFor(model => model.Address.ZipPostalCode, new { @class = "form-control" })
                    </div>
                    <div class="col-sm-4">
                        @Html.LabelFor(model => model.Address.Email)
                        @Html.TextBoxFor(model => model.Address.Email, new { @class = "form-control" })
                        @Html.HiddenFor(model => model.Address.Email)
                    </div>
                    <div class="col-sm-4">
                        @Html.RequiredHint()
                        @Html.LabelFor(model => model.Address.CellPhoneNumber)
                        @Html.TextBoxFor(model => model.Address.CellPhoneNumber, new { @class = "form-control" })
                    </div>
                    <div class="col-sm-4">
                        @Html.LabelFor(model => model.Address.PhoneNumber)
                        @Html.TextBoxFor(model => model.Address.PhoneNumber, new { @class = "form-control", @placeholder = "Optional" })
                    </div>
                    <div class="col-sm-12">
                        <div class="address-type-wrapper" id="addressTypeDiv">
                            <table>
                                <tbody>
                                    @if (Model.IsAddressTypeVerified)
                                    {
                                    <tr>
                                        <td>
                                            <label>This is a </label>
                                            @Html.HiddenFor(model => model.Address.Type)
                                            @Html.HiddenFor(model => model.IsAddressTypeVerified)
                                        </td>
                                        <td><span class="lowercase">@Model.Address.Type.Value</span> location</td>
                                    </tr>
                                    }
                                    else
                                    {
                                    <tr>
                                        <td>
                                            <label>@Html.RequiredHint() This is a </label>
                                        </td>
                                        <td>@Html.RadioButtonFor(model => model.Address.Type, AddressType.Business)<label for="Address_Type">business location</label></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td>
                                            @Html.RadioButtonFor(model => model.Address.Type, AddressType.Residential, new { @id = "Address_Type1" })<label for="Address_Type1">residential location</label>
                                            <div class="order-tip" data-target="residential-address">?</div><div class="popover-message"></div>
                                        </td>
                                    </tr>
                                    }
                                </tbody>
                            </table>
                            <div class="popover-contents">
                                <div id="residential-address" class="popover-content">
                                    <div class="title">
                                        Residential Address
                                    </div>
                                    <div class="content">
                                        <p>An additional fee of $2 per package will apply if the delivery location is a residential location. A residential location is defined as a location that is a home, including a business operating out of a home.</p>
                                        <p>For any package that is delivered to a residential location with "No Signature Required" selected, the $2 fee will be waived; however, SpotsHUB EXPRESS will only make one delivery attempt. Any package that is not picked up by the receiver within 7 days from the final delivery attempt will be returned to the sender.</p>
                                    </div>
                                </div>
                            </div>

                            @Html.HiddenFor(model => model.Address.IsTypeRequired)
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>

                <div class="section-wrapper">
                    <div class="col-xs-12">
                        <h3>Delivery Reference</h3>
                        <div class="row">
                            <div class="delivery-reference">
                                <div class="col-sm-6">
                                    <p>You may choose a business or personnel name to be displayed at the "Order By" section of the shipping label:</p>
                                </div>
                                <div class="col-sm-6">
                                    @Html.TextBoxFor(model => model.OrderByInfo, new { @class = "form-control" })
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="delivery-reference">
                                <div class="col-sm-6">
                                    <p>You may enter special shipping instruction(s) regarding this order:</p>
                                </div>
                                <div class="col-sm-6">
                                    @Html.TextAreaFor(model => model.AdditionalInstruction, new { @class = "form-control" })
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 receiver-signature">
                        <h3>Receiver Signature</h3>
                        <p>Is signature required on receiver's end?</p>
                        <table>
                            <tr>
                                <td>@Html.RadioButtonFor(model => model.NoSignature, false)</td>
                                <td><label for="NoSignature">Yes</label></td>
                            </tr>
                            <tr class="package-line">
                                <td>@Html.RadioButtonFor(model => model.NoSignature, true, new { @id = "NoSignature1"})</td>
                                <td><label for="NoSignature1">No. Package may be left at door / front desk if the receiver is not present. (one delivery attempt only)</label></td>
                            </tr>
                        </table>
                        <div>
                            <br />
                            <p><em>** Any packages with "No Signature Required" selected will not qualify for the free insurance coverage.</em></p>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="col-xs-12 col-md-6 col-md-offset-3">
                <input type="button" class="btn btn-normal btn-block" data-action="submit" value="Continue" />
            </div>
            <div class="clear"></div>
        </div>
        @if (Model.Addresses.Count > 0)
        {
            <div class="address-select-list">
                <span class="step-back"><i class="fa fa-arrow-circle-o-left"></i> Back</span>
                <h2>Select Delivery Address</h2>
                <div class="address-search">
                    <table>
                        <tr><td>Search Address: </td><td><input type="text" class="form-control address-search-field" placeholder="Please enter keywords" /></td></tr>
                    </table>
                </div>
                @foreach (var address in Model.Addresses)
                {
                    <div class="address-select-item" data-action="submit" data-name="@Html.NameFor(model => model.SelectedAddressId)" data-value="@address.Value" data-name2="selectAddress" data-value2="true">
                        <div class="address-select-item-content">
                            @Html.Raw(address.Text)
                        </div>
                    </div>
                }
            </div>
        }
    </div>
}

<script type="text/javascript">
    
    $(function () {
        addressTypeSelectEvent();
        signatureToggle(true);
    });

    //if address type is business,it must signature
    function addressTypeSelectEvent() {
        $('#addressTypeDiv input[type=radio]').change(function () {
            signatureToggle();
        });
    }

    //show or hide signature area
    function signatureToggle(isStart) {
        var flag = $('#addressTypeDiv input[type=radio]:checked ').val() == 'Business';
        flag ? $('.col-xs-12.receiver-signature').hide() : $('.col-xs-12.receiver-signature').show();
        if (!isStart) {
            $("#input[name=NoSignature]").removeAttr("checked");
            $("input[name=NoSignature]:eq(0)").attr("checked", "checked");
        }
    }

</script>
